<template>
	<div>
		<h2>category</h2>
		<Row type="flex" :gutter="10">
			<Col>
			<Button type="primary" @click="goL1">栏目1</Button>
			</Col>
			<Col>
			<Button type="primary" @click="goL2">栏目2</Button>
			</Col>
		</Row>
		<Row v-for="(item, index) in routes" type="flex">
			<Col flex="1" :class="{ 'on': isMatch(item.name) }" @click="onChange(index)">
			{{ item.name }}
			</Col>
		</Row>
		<Row v-for="(item, index) in routes">
			<Row type="flex" v-if="currentIndex == index">
				<Col flex="1" :class="{ 'on': item.on }">
				{{ item.name }} {{ index }}
				</Col>
				<Col flex="2">
				<Row type="flex" :gutter="10">
					<Col v-for="(v, i) in item.children" flex="1" :class="{ 'on': v.on }">
					{{ v.name }}
					</Col>
				</Row>
				</Col>
			</Row>
		</Row>
		<router-view></router-view>
	</div>
</template>

<script>
export default {
	name: 'category.index',
	data() {
		return {
			routes: [],
			currentIndex: 0,
			a: {
				a: 1,
				b: 2,
				c: 3
			},
			other: {
				a: 1,
				b: 2,
				c: 3
			}
		}
	},
	methods: {
		isMatch(name) {
			let { matched } = this.$route;
			return matched.find(res => res.name == name);
		},
		goL1() {
			this.$router.push({
				name: 'category.l1',
				query: {
					a: 1,
					b: 2
				}
			})
		},
		goL2() {
			this.$router.push({
				name: 'category.l2'
			})
		},
		onChange(index) {
			this.currentIndex = index;
		}
	},
	mounted() {
		console.log(this.$route);
		console.log(this.$router.options.routes);
		this.routes = this.$router.options.routes;
		this.routes.forEach((res, index) => {
			console.log(res);
			if (this.isMatch(res.name)) {
				res.on = true
				this.currentIndex = index;
			}
			if (res.children) {
				res.children.forEach(res => {
					if (this.isMatch(res.name)) {
						res.on = true;
					}
				})
			}
		})
	}
}
</script>

<style lang="scss" scoped>
.on {
	font-weight: bold;
}
</style>